<template>
    <div class="breadcrumb" :style="{backgroundColor:type === 'cube' ? '#FFFFFF':backgroundColor}" v-if="historyRoutes.length">
        <a-breadcrumb :separator="type === 'cube' ? '':separatorStyle">
            <a-breadcrumb-item v-for="(item, index) in historyRoutes" :key="index">
                <span :class="[type ==='cube' ? 'breadcrumb-item':'breadcrumb-item-normal']"
                    :style="{color:item.path == $route.path ? type === 'cube' ? '#FFFFFF':activeColor:textColor,backgroundColor:item.path == $route.path ? type === 'cube' ? themeColor:itemActiveColor:''}"
                    @click.prevent="handleClick(item)">
                    {{ item.name }}
                    <a-icon v-show="showCloseEach" v-if="historyRoutes.length > 1" :type="iconType" @click.stop="handleClose(item,index)" />
                    <a-icon v-show="!showCloseEach" v-if="historyRoutes.length == 1 ? false:index == historyRoutes.length - 1"
                        :type="iconType" @click.stop="handleClose(item,index)" />
                </span>
            </a-breadcrumb-item>
        </a-breadcrumb>
        <!--   关闭全部     -->
        <div style="padding: 0 10px">
            <a-dropdown>
                <a-button class="close-btn" style="margin-left: 8px"> 关闭 <a-icon type="down" /></a-button>
                <a-menu slot="overlay" @click="breadcrumbOption">
                    <a-menu-item key="1">
                        <span>关闭全部</span>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <span>关闭其他</span>
                    </a-menu-item>
                </a-menu>
            </a-dropdown>
        </div>
    </div>
</template>
<script>
export default {
    name: "cubeBreadcrumb",
    props: {
        historyRoutes: {
            type: Array,
            default: () => [],
        },
        separatorStyle: {
            type: String,
            default: "/",
        },
        type: {
            type: String,
            default: (type) => {
                if (type) {
                    return "cube";
                } else {
                    return "normal";
                }
            },
        },
        backgroundColor: {
            type: String,
            default: "",
        },
        textColor: {
            type: String,
            default: "#4F4E4EB5",
        },
        activeColor: {
            type: String,
            default: "#2c2b2b",
        },
        itemActiveColor: {
            type: String,
            default: "",
        },
        showCloseEach: {
            type: Boolean,
            default: true,
        },
        iconType: {
            type: String,
            default: "close",
        },
    },
    computed: {
        themeColor() {
            //获取引入的scss文件中的主题颜色
            const element = document.documentElement; // 获取根元素
            const computedStyle = window.getComputedStyle(element);
            return computedStyle.getPropertyValue("--theme-color");
        },
    },
    methods: {
        handleClick(item) {
            this.$emit("click", item);
        },
        handleClose(item, index) {
            this.$emit("close", item, index);
        },
        breadcrumbOption({ key }) {
            this.$emit("breadcrumbClose", key);
        },
    },
};
</script>
<style scoped lang="scss">
@import "@/style/commonStyle";
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    .breadcrumb-item {
        transition: 0.5s all;
        cursor: pointer;
        background-color: white;
        line-height: 37px;
        display: inline-block;
        padding: 0 20px;
        color: rgba(0, 0, 0, 0.71);
        margin: 1px;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.07);
        &:hover {
            background-color: $theme-color;
            box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.07);
            transition: 0.5s all;
            color: white !important;
        }
    }
    .breadcrumb-item-normal {
        transition: 0.5s all;
        cursor: pointer;
        line-height: 37px;
        display: inline-block;
        padding: 0 20px;
        margin: 1px;
        &:hover {
            transition: 0.5s all;
        }
    }
}
.close-btn {
    border-color: $theme-color;
    color: $theme-color;
    &:hover {
        border-color: $theme-color;
        color: $theme-color;
    }
    &:focus {
        border-color: $theme-color;
        color: $theme-color;
    }
}
::v-deep .ant-dropdown-menu-item:hover {
    background-color: $theme-color-fade;
}
</style>
